<template>
    <MainDetails/>
    <BgLine/>
    <BackGround>
        <div class="_main" v-if="s.id > 0">
          <div class="_main_name">—— {{$t("union.mine")}} ——</div>
          <div class="_main_m">
            <div class="_m_m_2">
              <div>{{$t("union.name")}} {{s.name}}</div>
              <div>{{$t("union.level")}}Lv{{s.level}}</div>
            </div>
            <div class="_m_m_2">
              <div>{{$t("union.num")}}{{ s.people }}</div>
              <div>{{$t("union.award")}}{{ s.totalGainMoney }}KOS</div>
            </div>
            <div class="_m_m_2">
              <div>{{$t("union.address")}}{{ address }}</div>
              <div>{{$t("union.power")}}{{ s.totalCombatPower }}</div>
            </div>

          </div>

          <div class="_b_b" v-if="s.id > 0 && s.owner">
            <button class="union_join" @click="$router.push('/AuditMember')">{{$t("union.applylist")}}</button>
            <button class="union_join" @click="$router.push('/UpgradeUnion?level='+s.level)">{{$t("union.upgrade")}}</button>
            <button class="union_join" @click="dissolve">{{$t("union.dissolve")}}</button>
          </div>


        </div>
    </BackGround>
</template>

<script setup>
    import MainDetails from "@components/MainDetails/index.vue";
    import BackGround from "@components/BackGround/index.vue";
    import BgLine from '@components/BgLine/index.vue'
    import http from '../../http'
    import {ref, computed} from 'vue'
    import router from "../../router";
    import {useI18n} from "vue-i18n";

    const {t} = useI18n()

    const s = ref({
      id: 0,
      address: '',
      name:'',
      level: 0,
      people: 0,
      totalCombatPower: 0,
      totalGainMoney: 0,
      userId: 0,
      owner: false,
    })

    const address = computed(() => {
      var addr = s.value.address
      if (addr && addr.length > 10) {
        return addr.substring(0,5) + "***" + addr.substring(addr.length - 4);
      }
      return addr
    })


    async function dissolve() {
      var res = await http.post(`/api/union/dissolve`)
      if (res.code === 200) {
        Toast(t('operationSuccess'))
        router.replace("/RankingList")
      }

    }

    async function init() {
      var res = await http.get(`/api/union/my`)
      if (res.code === 200) {
        s.value = res.data
        if (res.data == null) {
          router.replace("/RankingList")
        }
      }
    }

    init()

</script>

<style scoped lang="scss">
  .index {
    font-size: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  ._main {
    padding: 18px 15px;
  }
  ._main_name {
    font-size: 18px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color3;
    line-height: 25px;
  }
  ._main_m {
    width: 100%;
    height: 183px;
    background: #967E64;
    border-radius: 8px;
    margin-top: 20px;
    padding: 15px;
  }
  ._m_m_1 {
    width: 315px;
    height: 136px;
    border-radius: 2px;
    border: 1px solid $color;
    padding-top: 25px;
    font-size: 15px;
    color: #E8D2BA;
    line-height: 2;
    @include fontTCMedium;
  }
  ._m_m_1_1 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ._m_m_2 {
    @include flex;
    margin-top: 15px;
    &:nth-child(2) {
      margin-top: 20px;
    }
    div {
      font-size: 13px;
      @include fontTCRegular;
      font-weight: 400;
      color: #E8D2BA;
    }
  }
  .union_join {
    width: 80px;
    height: 30px;
    background: #d8bc84;
    border-radius: 5px;
    font-size: 12px;
    @include fontSCRegular;
    font-weight: 400;
    color: #fff;
    line-height: 30px;
    margin-top: 40px;
  }
  ._b_b {
    @include flex;
    padding: 0 32px;
  }
</style>
